<template>
  <div class="comment" v-if="comment && comment.user">
    <img :src="comment.user.avatarUrl" :alt="comment.user.nickname" />
    <div class="comment-info">
      <div class="comment-content">
        <span class="name">{{comment.user.nickname}}</span>
        <span v-if="comment.user.userType === 2" class="user-v"></span>
        <img v-else-if="comment.user.userType === 3" src="@/assets/img/vip-year.png" alt="vip" class="vip">
        <img v-else-if="comment.user.userType === 4" src="@/assets/img/vip-year.png" alt="vip-year" class="vip-year">
        <span>：{{comment.content}}</span>
      </div>
      <div class="be-reply" v-if="comment.beReplied && comment.beReplied.length !==0">
        <span class="name">{{comment.beReplied[0].user.nickname}}</span>
        <span>：{{comment.beReplied[0].content}}</span>
      </div>
      <div class="time">
        <div>{{comment.time | timer}}</div>
        <div class="like">
          <img src="@/assets/img/liked.png" alt="点赞">
          <span>({{comment.likedCount | count}})</span>
          <span>|</span>
          <span>回复</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/common/format'

export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  filters: {
    timer(val) {
      return formatDate(val,'MM月dd日 hh:mm')
    },
    count(val) {
      return val>100000?(val/10000).toFixed(1)+'万':val
    }
  }
}
</script>

<style scoped>
.comment {
  display: flex;
  padding: 15px 0;
  font-size: 12px;
  line-height: 20px;
  border-bottom: 1px dotted #666;
}

/* 左边头像 */
.comment img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  cursor: pointer;
}

/* 评论右边文字区域 */
.comment-info {
  width: 100%;
}

/* 回复信息 */
.comment-content {
  margin-bottom: 15px;
}
.name {
  color: #0c73c2;
  cursor: pointer;
}
.name:hover {
  text-decoration: underline;
}
.user-v {
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 13px;
  margin-left: 5px;
  background: url(~@/assets/img/icon.png);
}
.comment-content .vip {
  vertical-align: middle;
  width: 26px;
  height: 12px;
  margin-left: 5px;
}
.comment-content .vip-year {
  vertical-align: middle;
  width: 39px;
  height: 12px;
  margin-left: 5px;
}
/* 被回复信息 */
.be-reply {
  padding: 8px 19px;
  background-color: #f4f4f4;
  border: 1px solid #dedede;
}

/* 时间行 */
.time {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #777;
}
.like {
  display: flex;
  align-items: center;
}
.like img {
  width: 15px;
  height: 15px;
  margin-right: 2px;
}
.like span:nth-child(2),.like span:nth-child(4) {
  cursor: pointer;
}
.like span:nth-child(2):hover,.like span:nth-child(4):hover {
  text-decoration: underline;
}
.like span:nth-child(3) {
  margin: 0 8px;
}
</style>